<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery-plugin</title>
	<script src="framework/jquery-1.10.2.min.js"></script>
	<script>
		(function($,window){
			$.fn.disable = function(){
				$(this).prop("disabled",true);
			}
		})(jQuery,window);


		$(function(){
			$("#content").disable();
			initTabs();
		});

		function initTabs () {
			var $contents = $(".contents > li");
			$contents.hide();
			var $tabs = $(".links li");
			var selectedIndex = 0;
			$tabs.each(function(index,item){
				if($(item).hasClass("selected")){
					selectedIndex = index;
				}

				$(item).on("click",function(){
					$tabs.removeClass("selected");
					$(item).addClass("selected");
					$contents.hide();
					$contents.eq(index).show();
				});
			});
			$contents.eq(selectedIndex).show();
		}
	</script>

	<style>
		body {
			font-size: 12px;
			margin: 0;
			padding: 0;
			font-family: 'Microsoft yahei';
		}

		#header {
			height: 80px;
			background: #4682B4;
		}

		#content {
			position: relative;
			height: 800px;
		}

		#content .col-left {
			position: absolute;
			left: 0;
			left: 0;
			height: 100%;
			width: 200px;
			background: #DEB887;
		}

		#content .col-right {
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			width: 200px;
			background: #DEB887;
		}

		#content .col-mid {
			margin: 0 200px 0 200px;
			background: #FFE4E1;
			height: 100%;
		}

		ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
		}

		#tab {
			padding: 30px;
		}

		.links li{
			float: left;
			cursor: pointer;
			height: 20px;
			line-height: 20px;
			background: #eee;
			border: 1px solid #ccc;
			border-left: none;
			padding: 5px 10px;
			font-size: 14px;
			font-weight: bold;
			border-bottom: none;
		}

		.links li:first-child {
			border-left: 1px solid #ccc;
		}

		.links .selected {
			background: #0077fa;
			color: #fff;
		}

		.links:after {
			content: '';
			display: block;
			height: 0px;
			visibility: hidden;
			clear: both;
		}

		.contents {
			width: 100%;
			border: 1px solid #ccc;
			margin-top: -2px;
			height: 400px;
			overflow: hidden;
			background: #efefef;
			transition: all .6s;
		}

		.contents:hover {
			box-shadow: 1px 1px 10px rgba(0,0,0,.4);
		}

		.contents li {
			height: 100%;
			padding: 20px;
		}
	</style>

</head>
<body>
	<div id="header"></div>
	<div id="content">
		<div class="col-right"></div>
		<div class="col-left"></div>
		<div class="col-mid">
			<div id="tab">
				<ul class="links">
					<li>Home</li>
					<li class="selected">Products</li>
					<li>Features</li>
				</ul>
				<ul class="contents">
					<li>Home page goes here</li>
					<li>Products page</li>
					<li>See Features</li>
				</ul>
			</div>			
		</div>
	</div>
</body>
</html>